<template>
  <div class="container">
    <el-row type="flex">
      <el-col :span="14">
        <el-card class="box no-border mb-20">
          <h4 class="box-title">机构概述</h4>
          <div class="box-wrapper">
            <el-card class="inner-box">
              <h4 class="inner-box-title mechanismleft">{{ getdata.organOverview.organName }}</h4>
              <p>{{ getdata.organOverview.organAddress }}</p>
              <p>{{ getdata.organOverview.principal }},{{ getdata.organOverview.phone }}</p>
              <button class="mapbtn" @click="openmap">查看营业部分布</button>
            </el-card>
            <div class="split-line" />
            <el-card class="inner-box  mechanismright ">
              <el-col :span="10"> <p>分拣中心(个)</p> <router-link to="/basic">{{ getdata.organOverview.sortingCenterNumber }}</router-link></el-col>
              <el-col :span="10"> <p>营业部(个)</p><router-link to="/basic">{{ getdata.organOverview.agencyNumber }}</router-link></el-col>
              <el-col :span="10"> <p>司机人数(个)</p><router-link to="/Staff/driver">{{ getdata.organOverview.driverNumber }}</router-link></el-col>
              <el-col :span="10"> <p>快递员人数(个)</p><router-link to="/Staff/courier">{{ getdata.organOverview.courierNumber }}</router-link></el-col>
            </el-card>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="">

          <h4 class="box-title ">今日数据 <span style="margin-left:300px">
            <i class="el-icon-refresh-left" @click="updateTime1" />{{ formattedDate1 }}</span></h4>
          <div class="sub-box-wrapper">
            <div class="sub-box">
              <p>订单金额(元)</p>
              <h4 class="sub-box-title">2284</h4>
              <em>  较昨日+342<i class="el-icon-top" /></em>
            </div>
            <div class="sub-box">
              <p>订单数量(笔)</p>
              <h4 class="sub-box-title">2284</h4>
              <em>  较昨日+342<i class="el-icon-top" /></em>
            </div>
            <div class="sub-box">
              <p>运输任务(次)</p>
              <h4 class="sub-box-title">2284</h4>
              <em>  较昨日+342<i class="el-icon-top" /></em>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="24">
        <el-card class="box ">
          <h4 class="box-title ">待办任务 <span class="el-icon-question" />
            <span style="margin-left:400px"><i class="el-icon-refresh-left" @click="updateTime2" />
              2023-05-31 17:04- {{ formattedDate2 }}</span> <span style="margin-left:300px">
              <i class="el-icon-refresh-left" @click="updateTime2" />2023-05-31 17:04- {{ formattedDate2 }}</span></h4>
          <div class="Todotask">
            <div class="ltecharts">  <echarts v-for="(data, index) in chartDataList" :key="index" :chart-data="data" /></div>

          </div>
        </el-card>
      </el-col>

    </el-row>
    <el-row class="Commonfunction">
      <el-col :span="24">

        <div class="Commonfunctionbox">
          <h4>常用功能</h4>
          <el-row class="Commonfunctionbox_wrapper">
            <div class="Commonfunctionbox_wrapper_box"><span class="el-icon-box" /><p>快递作业</p></div>
            <div class="Commonfunctionbox_wrapper_box"><span class="el-icon-truck" /><p>运输任务</p></div>
            <div class="Commonfunctionbox_wrapper_box"><span class="el-icon-guide" /><p>线路管理</p></div>
            <div class="Commonfunctionbox_wrapper_box"><span class="el-icon-truck" /><p>车辆管理</p></div>
            <div class="Commonfunctionbox_wrapper_box"><span class="el-icon-s-custom" /><p>司机管理</p></div>
            <div class="Commonfunctionbox_wrapper_box"><span class="el-icon-document" /><p>运费查询</p></div>

          </el-row>
        </div>

      </el-col></el-row>
    <el-row type="flex" class="map">
      <el-col :span="12">
        <el-card class="box map">
          <h4 class="box-title ">线路管理 <span class="el-icon-question" />
            <span style="margin-left:450px"><i class="el-icon-refresh-left" />2023-05-30 19:23</span></h4>
          <div>
            <mapecharts /></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class=" box map">
          <h4 class="box-title " style="height:30px">运输任务
            <span style="margin-left:500px;color:#999;">查看更多 > </span>  </h4>
          <div>
            <transport-task-list style="margin-top:20px" /></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" class="map">
      <el-col :span="12">
        <el-card class="box map">
          <h4 class="box-title ">线路管理 <span class="el-icon-question" />
            <span style="margin-left:450px"><i class="el-icon-refresh-left" />2023-05-30 19:23</span></h4>
          <p>单位:笔</p>
          <div class="Totalordervolume">
            <div><h4>{{ }}</h4>
              <p>订单平均值</p>
            </div>
            <div><h4>{{ }}</h4>
              <p>订单最高值</p>
            </div>
            <div><h4>{{ }}</h4>
              <p>订单最低值</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class=" box map">
          <h4 class="box-title ">运输任务 <span class="el-icon-question" /> <span style="margin-left:300px"><i class="el-icon-refresh-left" />2023-05-30 19:23</span></h4>
          <div><OrderDistribution /><div />
          </div></el-card>
      </el-col>
    </el-row>
    <BeiJingMap :mapshow.sync="mapshow" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BeiJingMap from './components/BeiJingMap.vue'
import dayjs from 'dayjs'
import Echarts from './components/echarts.vue'
import Mapecharts from './components/mapecharts.vue'
import OrderDistribution from './components/OrderDistribution.vue'
import TransportTaskList from './components/TransportTaskList.vue'
import { Querydata, getnewdata } from '@/api/worktable'

export default {
  name: 'Dashboard',
  components: { Echarts, Mapecharts, TransportTaskList, OrderDistribution, BeiJingMap },
  data() {
    return {

      getdata: {},
      newdata: {},
      mapshow: false,
      timestamp1: new Date().getTime(),
      timestamp2: new Date().getTime(),
      timestamp3: new Date().getTime(),
      chartDataList: [
        [0.1],
        [0.2],
        [0.3],
        [0.4],
        [0.5],
        [0.6]
      ]

    }
  },

  computed: {
    ...mapGetters([
      'name'

    ]),

    formattedDate1() {
      const date = dayjs(this.timestamp1)
      return date.format('YYYY-MM-DD HH:mm')
    },
    formattedDate2() {
      const date = dayjs(this.timestamp2)
      return date.format('YYYY-MM-DD HH:mm')
    },
    formattedDate3() {
      const date = dayjs(this.timestamp3)
      return date.format('YYYY-MM-DD HH:mm')
    }
  },
  created() {
    // this.getworktable()
    this.Querydata()
    this.getnewdata()
  },
  methods: {
    openmap() {
      this.mapshow = true
    },
    updateTime1() {
      this.timestamp1 = new Date().getTime()
    },
    updateTime2() {
      this.timestamp2 = new Date().getTime()
    },
    updateTime3() {
      this.timestamp3 = new Date().getTime()
    },

    async  Querydata() {
      this.getdata = await Querydata()
      console.log(this.getdata)
    },
    async  getnewdata() {
      this.newdata = await getnewdata()
      console.log(this.newdata)
    }

  }

}
</script>

<style  scoped>
*{
  margin: 0px;
  padding: 0px;
}
body{
  font-size: 14px;
}
.container {
  background-color: #f7f7f7; /* 页面背景色 */
  padding: 20px;
  height: 2000px;

}

.box {
  height: 290px; /* 盒子高度为 230px */
  background-color: #fff; /* 盒子背景色 */
  position: relative; /* 使 box-title 绝对定位生效 */
  margin: 0 20px 20px 0; /* 左右两个盒子之间的距离、盒子之间的垂直距离 */
  font-size: 14px;
}
.mechanismright a{
  font-size: 30px;
  color: orangered;
  font-weight: 700;}
.el-card {
  box-shadow: none;
  border:0px;
  height: 260px;

}

.box-title {
font-size: 16px;

}

.box-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px;
}
em{
  font-style: normal;
}
.inner-box {
  flex: 1;
  height: 100%;
  background-color: #fff;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  margin: 0 10px;

}
.el-icon-refresh-left{
  font-size: 16px;
  color: orangered;
  margin-right: 5px;
}
.inner-box-title {
  font-size: 14px;
  height: 25px; /* H4 标签高度为 25px */
  margin: 0;
}

.split-line {
  width: 1px;
  height: 90px; /* 内部盒子高度是 100%，减去 margin 的值 */
  background-color: #e4e4e4; /* 分割线颜色 */
  margin: 0 10px;
}
.mechanismright h4{
 color:orangered;
 font-size: 25px;
 margin-top: 10px;
}
.mechanismright .el-col{
  margin:10px ;
}

.mapbtn{
  height: 35px;
  width: 150px;
  border: 1px solid orangered;
  background-color: rgb(231, 151, 122);
  margin-top: 30px;
}
.sub-box-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 230px;

}

.sub-box {
  width: 30%;
  background-color: #fff;
  height: 180px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
justify-content: space-evenly;
  align-items: center;
}
.sub-box h4{font-size: 30px;}
.sub-box-title {
  margin: 0 0 10px 0;
}
.el-icon-top{
  color: red;
}
.Todotask{

  margin-top: 20px;

}
.Todotask div p {
  margin-top: 10px;
  font-weight: 700;
  font-size: 16px;
}

.Commonfunction {
  height: 200px;
}
.Commonfunctionbox {
  height: 200px;

  background-color: #fff;
}
.Commonfunctionbox_wrapper {
display: flex;
font-weight: 600;
  justify-content:space-around;
    align-items: center;
    height: 200px;
    font-size: 16px;
}
.Commonfunctionbox_wrapper span{
  font-size: 30px;
  margin-top: 10px;
  }
.Commonfunctionbox_wrapper_box {
  width: 213px;
  height: 116px;
  background-color: #f2f2f2;
  display: flex;
   flex-direction: column;
   justify-content:space-around;
    align-items: center;
}
.map{
  margin-top:20px;
  height: 500px;
}
.Totalordervolume{
  display: flex;
  justify-content:space-around;
  text-align: center;

}
.Totalordervolume div{
  display: flex;
  flex-direction: column;
  height: 100px;
margin-top: 150px  ;
}
.Totalordervolume div h4{
  font-size: 25px;
  color: orangered;
   display: flex;

}
.ltecharts{
  display: flex;
  justify-content:space-around;
  }
.ltecharts :nth-child(5){
margin-left:150px ;
}
.ltecharts :nth-child(6){
margin-left:70px ;
}
.Todotask_p {
  display: flex;

}
.Todotask_p p{
  margin-left:100px

}

</style>
